<template>
      <div id="banner">
            <div class="banbox">
                 
                              <el-carousel height="740px">
                                    <el-carousel-item >
                                          <img src="../../assets/img/ban1.png" alt="">
                                    </el-carousel-item>
                                    <el-carousel-item >
                                          <img src="../../assets/img/ban2.png" alt="">
                                    </el-carousel-item>
                                    <el-carousel-item >
                                          <img src="../../assets/img/ban3.png" alt="">
                                    </el-carousel-item>
                              </el-carousel>
                       
            </div>

            <div class="infobox">
                  <div class="content">
                        <div class="item" v-for="(item, index) in list" :key="index">
                              <div class="title">{{ item.title }}</div>
                              <div class="subtitle">{{ item.subtitle}}</div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        list: [
                              {
                                    title: "使用简单快捷",
                                    subtitle: "设备自动感知省去记忆/输入信息的麻烦"
                              },
                              {
                                    title: "安全级别最高",
                                    subtitle: "图层人脸识别率99.9%/大大降低信息窃取风"
                              },
                              {
                                    title: "吸引顾客消费",
                                    subtitle: "新潮的场景深受年轻顾客青睐/他们是未来消费主力"
                              },
                        ]
                  }
            },
      }
</script>

<style lang="scss" scoped>
#banner {
      // width: 1920px;
       max-width: 1920px;
       margin: 0 auto;
      position: relative;
      left: 0;
      top: 0;
      .banbox {
            width: 100%;
            // max-width: 1920px;
            img {
                  //max-width: 1920px;
                  margin: 0 auto;
                  height: 740px;
                  min-width: 1440px;
                  display: block;
            }
      }
      .infobox {
            width: 100%;
            background-color: #1e2d8e;
            height: 140px;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 99;
            .content {
                  width: 1440px;
                  margin: 0 auto;
                  display: flex;
                  align-items: center;
                  .item {
                        width: 480px;
                        height: 140px;
                        text-align: center;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        color: #fff;
                        &:nth-child(2) {
                              border-left: 1px solid #f3f3f3;
                              border-right: 1px solid #f3f3f3;
                        }
                        .title {
                              font-size: 24px;
                        }
                        .subtitle {
                              font-size: 18px;
                              margin: 20px 0;
                        }
                  }
            }
      }
}
</style>